<template>
  <div class="dep">
    <div class="dep-box">
      <Input
        clearable
        v-model="searchValue"
        :placeholder="$t('common.inputNodeInfo')"
        style="width: 100%"
        @on-enter="searchHandler"
        @on-clear="searchHandler"
      >
        <Icon type="ios-search" @click="searchHandler" slot="suffix" />
      </Input>
      <div class="dep-box--wrap">
        <el-tree
          style="width: 100%;"
          :data="treeList"
          :props="treeProps"
          icon-class="ivu-icon-ios-arrow-forward"
          highlight-current
          :default-expanded-keys="[0]"
          node-key="jobCode"
          @node-click="onSelectChange"
        ></el-tree>
      </div>
      <span
        class="dep-box--info"
      >{{$t('common.selected')}}：{{current.nodeName? " "+current.nodeName +" ( "+current.code+" ) " : ''}}</span>
    </div>
  </div>
</template>

<script>
import { findPositionTreeList, findEmployeeList, findTreeNode, filterTree } from "@/api/treeApi";
import { CoreModuleName } from "@/const.js";

export default {
  name: "SelectDepBridge",
  data: () => ({
    treeList: [],
    searchValue: "",
    current: {},
    treeListBak: [],
    treeProps: {
      label: "name",
      children: "children"
    }
  }),
  props: {
    departmentCode: {
      type: String,
      default: "选择部门"
    }
  },
  computed: {
    actions() {
      const vm = this;
      return [
        {
          text: this.$t("common.save"),
          theme: "primary",
          handle: () => {
            if (this.current.nodeName) {
              this.$emit("Close", this.current);
            } else {
              this.$message.error({
                content: this.$t("common.pleaseSelect"),
                duration: 3
              });
            }
          },
          loading: false
        },
        {
          text: this.$t("common.close"),
          handle: () => this.$emit("Close")
        }
      ];
    }
  },
  created() {
    const { userInfo } = $store.state[CoreModuleName];
    if (userInfo.tenantCode) {
      this.tenantCode = userInfo.tenantCode;
    }

    this.$emit("SetTitle", this.$t("common.selectPosition"));
    this.$emit("SetPageWidth", 734);
    this.$emit("SetPageActions", this.actions);
  },
  async mounted() {
    const { departmentCode, tenantCode } = this;
    const { data } = await findPositionTreeList({ departmentCode, tenantCode });
    // this.treeList = this.formatTreeData(res.data);
    this.treeList = data;
    this.treeListBak = this.treeList;
  },
  methods: {
    onSelectChange({ code, name, jobCode, jobCodeDesc }) {
      this.current = { code, nodeName: name, jobCode, jobCodeDesc };
    },
    async searchHandler() {
      const { searchValue } = this;
      if (searchValue == "") {
        this.treeList = this.treeListBak;
        return;
      } else {
        const { departmentCode, tenantCode } = this;
        // searchValue
        const { data } = await findPositionTreeList({ departmentCode, nameOrCode: searchValue, tenantCode });
        this.treeList = data;
      }
    }
  }
};
</script>
<style lang="less">
.dep {
  height: 406px;
  &-box {
    width: 100%;
    height: 100%;
    // overflow-y: scroll;
    &--wrap {
      height: 377 - 32px;
      overflow-y: auto;
      margin-top: 10px;
    }
    &--info {
      line-height: 28px;
    }
  }
}
</style>
